<template>
     <el-dialog :title="taskName" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="10vh" :before-close="beforeClose" :close-on-click-modal="true">
        <div class="item" v-for="(item, index) in msgList" :key="index">
            <div class="label">消息类型： {{ ["", "文本", "图片", "视频"][item.type] }}</div>
            <img :src="item.content" style="width: 80px; height: 80px; margin-top: 15px;" v-if="item.type===2">
            <p v-if="item.type===1">{{ item.aiAutoGenerate ? item.aiContent : item.content }}</p>
            <el-button v-if="item.type===3" style="margin-top: 15px;" @click="videoShow(item.content)">播放视频</el-button>
        </div>

        <video ref="videoRef" style="position: fixed; left: -1000px; top: -1000px;" :controls="false"></video>
     </el-dialog>
</template>

<script>
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        },
        taskName: {
            type: String,
            default: ""
        },
        msgList: {
            type: Array,
            default: ()=>[]
        }
    },
    methods: {
        beforeClose(){
            this.$emit("beforeClose")
        },
        // 查看视频
        videoShow(src){
            let video = this.$refs.videoRef
            console.log(video)
            video.src = src
            if(video.requestFullscreen) {
                video.requestFullscreen()
            }else if(video.mozRequestFullscreen) {
                video.mozRequestFullscreen()
            }else if(video.webkitRequestFullscreen) {
                video.webkitRequestFullscreen()
            }else{
                video.msRequestFullscreen()
            }
            video.play()
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 800px !important;
    height: 80vh !important;
    border-radius: 10px;
    
}

:deep(.el-dialog__body) {
    padding: 0 15px 15px !important;
    height: calc(80vh - 64px);
    overflow-y: scroll;
}
:deep(.el-dialog__body::-webkit-scrollbar) {
    width: 0;
    height: 0;
}
.item {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
    .label {
        color: #333;
        font-weight: 600;
    }
    p {
        color: #AAA;
        line-height: 1.4;
        padding-top: 13px;
    }
}
</style>

